<script setup lang="ts">
import { ref, onMounted, defineEmits, computed, nextTick, watch } from 'vue'
import { getHotSongListDetailData, getSongUrlData, getSongIsPlayData } from '../api/api'
import type { RankSongsDetailsType, SongListType } from '../types'
import { usePlayerStore } from '@/stores/player'
import { storeToRefs } from 'pinia'

const props = defineProps({
    title: String,
    rankId: Number,
    currentTime: Number,
})
const store = usePlayerStore()
const { collectMusic, currentIndex } = storeToRefs(store)
const RankSongDetailsList = ref<RankSongsDetailsType[]>([])

const emit = defineEmits(['set-song-length'])
 onMounted(async () => {
    // 获取榜单歌曲详情数据
    if (props.rankId) {
        let { data: songDetails } = await getHotSongListDetailData(props.rankId)
        await nextTick()
        RankSongDetailsList.value = songDetails.playlist.tracks
        changeSelected(RankSongDetailsList.value)
    }


})

const changeSelected = (songList: RankSongsDetailsType[]) => {
    songList.map(item => {
        item.title = props.title;
        item.selected = false;
    })

}
// 点击播放音乐和显示小球控件
const changeBallState = (songItem: SongListType, index: number) => {

    store.isPlay = true
    store.changeBallStateActions(songItem);

}
// 添加全部音乐
const addSongList = () => {

    store.getAllSongActions(newSongList.value)
}
// 截取列表中的五十首歌曲
const newSongList = computed(() => {

    let newSong = RankSongDetailsList.value.slice(0, 50)

    let newCollectSong = collectMusic.value

    return props.rankId ? newSong : newCollectSong
})
// 处理歌曲列表长度
const newSongListLength = computed(() => {

  let songLength = props.rankId ? newSongList.value.length : collectMusic.value.length
   emit('set-song-length',songLength)
    return songLength
})

watch(
    () => currentIndex.value,
    (newValue, oldValue) => {
        console.log(newValue, "新");
        console.log(oldValue, "旧");

    }
)

</script>
<template >
    <div class="songs-container" v-if="newSongList.length">
        <div class="play-content">
            <i class="icon-all-play" @click="addSongList"></i>
            <p>全部播放 <span>({{ newSongListLength }})</span></p>
        </div>
        <div class="music-content" :class="{ active: currentIndex === item.id }" v-for="(item, index) in newSongList"
            :key="item.id" @click.stop="changeBallState(item, index)">
            <div class="music-left">
                <p>{{ index + 1 }}</p>
                <p class="small" :class="{ selected: currentIndex === item.id }"></p>
            </div>
            <div class="music-right ">
                <p class="van-ellipsis">{{ item.name }}</p>
                <p class="pub van-ellipsis" :class="{ active: currentIndex === item.id }">{{ item.ar[0].name }} · {{
                        item.name
                }}</p>
            </div>
        </div>

    </div>
</template>
<style lang="scss">
.songs-container {
    width: 100%;
    letter-spacing: 1px;
    font-size: 14px;

    .play-content {
        display: flex;
        align-items: center;

        .icon-all-play {
            margin-left: -4px;
            margin-right: 5px;
            width: 32px;
            height: 32px;
            background-image: url('@/assets/imgs/play-all.png');
            background-size: cover;
            background-repeat: no-repeat;
        }

        P {
            span {
                color: #646566;
            }
        }
    }

    .music-content {
        display: flex;
        margin: 16px 0;

        .music-left {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            margin-left: -6px;
            margin-right: 10px;
            width: 30px;

            .small {
                width: 0;
                height: 0;
                border: 6px solid transparent;
                border-bottom-color: #646566;
                transform: translateX(-1px);
            }

        }

        .music-right {
            display: flex;
            flex-direction: column;
            width: 250px;

            .pub {
                margin-top: 6px;
                font-size: 12px;
                color: #646566;
            }
        }
    }

    .active {
        color: rgb(22, 227, 22) !important;
    }

    .selected {
        border-bottom-color: rgb(22, 227, 22) !important;
        ;
    }
}
</style>